<template>
  <div class="restaurant-detail">
    <!-- 店铺信息 -->
    <el-card class="restaurant-info">
      <div class="restaurant-name">
        <h1>{{ restaurant.name }}</h1>
      </div>
      <div class="restaurant-location">
        <p>🌟💫 {{ restaurant.location }}</p>
        <p>🌈🌈{{ restaurant.tips }}</p>
      </div>
      <img :src="restaurant.image" class="restaurant-image" alt="餐厅图片" />
    </el-card>

    <!-- 菜品列表 -->
    <el-card class="menu-list">
      <h2>菜品列表</h2>
      <el-table :data="paginatedDishes">
        <el-table-column prop="name" label="菜品名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="image" label="图片">
          <template #default="{ row }">
            <img :src="row.image" class="dish-image" alt="菜品图片" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 用户评价 -->
    <el-card class="reviews">
      <h2>用户评价</h2>
      <el-table :data="paginatedReviews">
        <el-table-column prop="user" label="用户"></el-table-column>
        <el-table-column prop="comment" label="评价"></el-table-column>
        <el-table-column prop="rating" label="评分">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElRate, ElPagination } from 'element-plus';

const restaurant = reactive({
  id: 1,
  name: '塔斯汀',
  rating: 4.8,
  location: '镜湖区万达广场4楼',
  tips: '中国汉堡',
  image: 'src/assets/小塔斯汀.png',
  dishes: [
    { name: '菌菇牛肉堡', price: '9.9', image: 'src/assets/鸡腿堡.png' },
    { name: '培根煎蛋堡', price: '12', image: 'src/assets/培根煎蛋.png' },
    {name: '香辣鸡腿堡 ', price: '17', image: 'src/assets/菌菇牛肉.png'
    }
    // 菜品数据...
  ],
  reviews: [
    {id: 1, user: '张三', comment: '非常好吃', rating:'⭐️⭐️⭐️⭐️⭐️⭐️'},
    {id: 2, user: '李四', comment: '服务不错', rating: '⭐️⭐️⭐️⭐️⭐️'},
    // 用户评价数据...
  ],
  averageRating: 4.8
});

const currentPage = ref(1);
const pageSize = ref(5);
const reviewCurrentPage = ref(1);
const reviewPageSize = ref(5);


const paginatedDishes = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return restaurant.dishes.slice(start, end);
});


const paginatedReviews = computed(() => {
  const start = (reviewCurrentPage.value - 1) * reviewPageSize.value;
  const end = start + reviewPageSize.value;
  return restaurant.reviews.slice(start, end);
});


</script>

<style scoped>
.restaurant-detail {
  background: linear-gradient(120deg, #fff5e0, #fff5cc);

  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.restaurant-info {
  text-align: center;
  background-color: #f5de8b;
}

.restaurant-name {
  background-color: #fadb7a;
  margin-bottom: 7px;
}

.restaurant-location {
  background-color: #fadb7a;
  margin-bottom: 3px;
}

.restaurant-image {
  width: 80px;
  height: auto;
  border-radius: 10px;
  background-color: #fadb7a;
}

.menu-list {

  margin-top: 20px;
  width: 100%;
  background-color: #fadb7a;
}
.reviews{

  margin-top: 20px;
  width: 100%;
  background-color: #fadb7a;

}

.dish-image {
  width: 100px; /* 根据需要调整大小 */
  height: auto;
  background-color: #fadb7a;
}

.reviews {
  margin-top: 20px;
  background-color: #fadb7a;
}
</style>